 
 <div class="top_bar">
    <ul class="breadcrumb">
      <li><a routerLink="/"><fa-icon icon="home"></fa-icon></a> <span class="divider">/</span></li>
      <li class="active"><a href="#"><span jhiTranslate="global.menu.home">Home </span></a></li>
    </ul>
</div>

<div class="status-widgets">
    <div class="row">
        <div class="col-md-4">
            <div class="widget blue clearfix">
                <div class="options">
                    <ul>
                        <li><a href="#"><fa-icon icon="cog"></fa-icon></a></li>
                        <li><a href="#"><fa-icon icon="retweet"></fa-icon></a></li>
                    </ul>
                    <fa-icon icon="shopping-cart"></fa-icon>
                </div>
                <div class="details">
                    <div class="number">
                        382
                    </div>
                    <div class="description">
                        New Orders
                    </div>
                </div>
                <a href="#" class="more"><fa-icon icon="arrow-right"></fa-icon></a>
            </div>
        </div>

        <div class="col-md-4">
            <div class="widget grey clearfix">
                <div class="options">
                    <ul>
                        <li><a href="#"><fa-icon icon="cog"></fa-icon></a></li>
                        <li><a href="#"><fa-icon icon="retweet"></fa-icon></a></li>
                    </ul>
                    <fa-icon icon="globe"></fa-icon>
                </div>
                <div class="details">
                    <div class="number">
                        52.587
                    </div>
                    <div class="description">
                        New Visitors
                    </div>
                </div>
                <a href="#" class="more"><fa-icon icon="arrow-right"></fa-icon></a>
            </div>
        </div>

        <div class="col-md-4">
            <div class="widget red clearfix">
                <div class="options">
                    <ul>
                        <li><a href="#"><fa-icon icon="cog"></fa-icon></a></li>
                        <li><a href="#"><fa-icon icon="retweet"></fa-icon></a></li>
                    </ul>
                    <fa-icon icon="chart-area"></fa-icon>
                </div>
                <div class="details">
                    <div class="number">
                        $253k
                    </div>
                    <div class="description">
                        Monthly Earning
                    </div>
                </div>
                <a href="#" class="more"><fa-icon icon="arrow-right"></fa-icon></a>
            </div>
        </div>
    </div>
</div>
<div class="status-widgets">
    <div class="row">
        <div class="col-md-4">
            <div class="widget blue clearfix">
                <div class="options">
                    <ul>
                        <li><a href="#"><fa-icon icon="cog"></fa-icon></a></li>
                        <li><a href="#"><fa-icon icon="retweet"></fa-icon></a></li>
                    </ul>
                    <fa-icon icon="shopping-cart"></fa-icon>
                </div>
                <div class="details">
                    <div class="number">
                        382
                    </div>
                    <div class="description">
                        New Orders
                    </div>
                </div>
                <a href="#" class="more"><fa-icon icon="arrow-right"></fa-icon></a>
            </div>
        </div>

        <div class="col-md-4">
            <div class="widget grey clearfix">
                <div class="options">
                    <ul>
                        <li><a href="#"><fa-icon icon="cog"></fa-icon></a></li>
                        <li><a href="#"><fa-icon icon="retweet"></fa-icon></a></li>
                    </ul>
                    <fa-icon icon="globe"></fa-icon>
                </div>
                <div class="details">
                    <div class="number">
                        52.587
                    </div>
                    <div class="description">
                        New Visitors
                    </div>
                </div>
                <a href="#" class="more"><fa-icon icon="arrow-right"></fa-icon></a>
            </div>
        </div>

        <div class="col-md-4">
            <div class="widget red clearfix">
                <div class="options">
                    <ul>
                        <li><a href="#"><fa-icon icon="cog"></fa-icon></a></li>
                        <li><a href="#"><fa-icon icon="retweet"></fa-icon></a></li>
                    </ul>
                    <fa-icon icon="chart-area"></fa-icon>
                </div>
                <div class="details">
                    <div class="number">
                        $253k
                    </div>
                    <div class="description">
                        Monthly Earning
                    </div>
                </div>
                <a href="#" class="more"><fa-icon icon="arrow-right"></fa-icon></a>
            </div>
        </div>
    </div>
</div>

<div class="quick-actions">
    <ul>
        <li><a rel="tooltip" data-placement="bottom" title="Arrange appointment" href="#"><fa-icon icon="calendar"></fa-icon></a></li>
        <li><a rel="tooltip" data-placement="bottom" title="Manage files" href="#"><fa-icon icon="folder-open"></fa-icon></a></li>
        <li><a rel="tooltip" data-placement="bottom" title="Visit messages center" href="#"><fa-icon icon="inbox"></fa-icon></a></li>
        <li><a rel="tooltip" data-placement="bottom" title="Add new article" href="#"><fa-icon icon="plus"></fa-icon></a></li>
        <li><a rel="tooltip" data-placement="bottom" title="Manage site preferences" href="#"><fa-icon icon="cogs"></fa-icon></a></li>
    </ul>
</div>
<div class="widgets_area">
   <div class="row">
       <div class="col-md-6">
           <div class="well turq">
               <div class="well-header">
                   <h5>Basic charts</h5>
               </div>

               <div class="well-content">
                  <div echarts [options]="baroptions" class="demo-chart"></div>
               </div>
           </div>
       </div>

       <div class="col-md-6">
           <div class="well turq">
               <div class="well-header">
                   <h5>Basic line</h5>
               </div>

               <div class="well-content">
                   <div echarts [options]="linkoption" class="demo-chart"></div>
               </div>
           </div>
       </div>
   </div>

   <div class="row">
       <div class="col-md-12">
           <div class="well blue">
               <div class="well-header">
                   <h5>Sales</h5>
               </div>

               <div class="well-content">
                  <div echarts [options]="chartOption" class="chart"></div>
               </div>
           </div>
       </div>
 
   </div>
</div>
 